<template>
	<view>
		<view class="row" v-for="(site,index) in info.data" :key="site._id">
			<text class="tag" :class="computedColor(index)">{{index+1}}</text>
			<view class="cnt">{{site.name}}</view>
		</view>
		<view class="title">{{info.tip}}</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				info:{}
			}
		},
		computed:{
			computedColor(){
				return (key)=>{
					if(key <= 3){
						return `bg${key}`
					}
				}
			}
		},
		onLoad() {
			this.cloudObj();
		},
		methods:{
			async  cloudObj () {
				uni.showLoading()
			  const visiteObj = uniCloud.importObject('visite-obj') 
			  try {
			    const res = await visiteObj.visite('客户端与云对象通信') ;
					this.info = res;
					uni.hideLoading();
			   
			  } catch (e) {
			    uni.showModal({
			      title: '创建失败',
			      showCancel: false
			    })
					uni.hideLoading();
			  }
			}
		}
	}
</script>

<style lang="scss" scoped>
.title{
	
}
.row{
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 28rpx;
	padding: 24rpx;
	border-bottom: 1px solid #e5e5e5;
}
.tag{
	color: #999;
	padding:12rpx 24rpx;
	border-radius: 20rpx;
	margin-right: 20rpx;
}
.bg0{
	background: #e80000;
	color: #fff;
}
.bg1{
	background: #ff7200;
	color: #fff;
}
.bg2{
	background: #f8b300;
	color: #fff;
}
.title{
	padding:20rpx 0 ;
	text-align: center;
	color: #999;
	font-size: 24rpx;
}
</style>